<template>
    <view class="themeItem">
        <navigator :url="'/pages/classlist/classlist?id='+classify._id+'&name='+classify.name" class="box" v-if="!isMore">
            <image class="pic" :src="classify.picurl" mode="aspectFit"></image>
            <view class="mask">{{classify.name}}</view>
            <view class="tab">{{getTimeDifference(classify.updateTime)}}前更新</view>
        </navigator>
        <navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">
            <image class="pic" src="../../common/images/more.jpg" mode="aspectFit"></image>
            <view class="mask">
                <uni-icons type="more-filled" size="36" color="#fff"></uni-icons>
                <view class="text">更多</view>
            </view>

        </navigator>
    </view>
</template>

<script setup>
    import {
        getTimeDifference
    } from '../../utils/common.js'
    defineProps({
        classify: {
            type: Object,
        },
        isMore: {
            type: Boolean,
            default: false
        }
    })
</script>

<style lang="scss" scoped>
    .themeItem {
        .box {
            height: 340rpx;
            position: relative;
            border-radius: 10rpx;
            overflow: hidden;

            .pic {
                width: 100%;
                height: 100%;

            }

            .mask {
                height: 70rpx;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.2);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(20rpx);
                font-weight: 600;
            }

            .tab {
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(250, 129, 90, 0.7);
                border-radius: 0 0 10rpx 0;
                font-size: 22rpx;
                color: white;
                padding: 0 10rpx;

            }
        }

        .box.more {
            .mask {
                width: 100%;
                height: 100%;
                flex-direction: column;
            }

            .text {
                font-size: 28rpx
            }
        }
    }
</style>